<template>
  <div class="car">
    <!-- 轮播图区域 -->
    <div class="carousel">
      <el-carousel height="287px" @change="xvhua">
        <el-carousel-item v-for="(item, index) in imgs" :key="index">
          <img :src="item.url" style="width: 770px" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 右侧下载区域 -->
    <div class="download">
      <div class="imgdown"></div>
      <div class="down">
        <router-link to="/download" class="jinglingtu"> </router-link>
      </div>
    </div>
    <!-- 背景图虚化 -->
    <div>
      <div ref="imgxvhua" class="imgxvhua"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Carousel",
  data() {
    return {
      imgUrl: require("../assets/img/1.png"),
      imgs: [
        { url: require("../assets/img/1.png") },
        { url: require("../assets/img/2.png") },
        { url: require("../assets/img/3.png") },
        { url: require("../assets/img/4.png") },
        { url: require("../assets/img/5.png") },
        { url: require("../assets/img/6.png") },
        { url: require("../assets/img/7.png") },
        { url: require("../assets/img/8.png") },
      ],
    };
  },
  methods: {
    xvhua(a, b) {
      const newurl = this.imgs[a].url;
      console.log(newurl);
      console.log(this);
      this.imgUrl = newurl;
      this.$refs.imgxvhua.style.background = `url(${this.imgUrl})`;
    },
  },
};
</script>

<style scoped>
.car {
  position: relative;
  height: 285px;
  overflow: hidden;
}
.carousel {
  width: 770px;
  position: absolute;
  left: 349px;
}
.download img {
  position: absolute;
  right: 207px;
}
.down {
  position: absolute;
  top: 185px;
  right: 467px;
}
.jinglingtu {
  width: 215px;
  height: 56px;
  position: absolute;
  background: url("../assets/download.png");
  background-position: 0px 64px;
}
.imgdown {
  position: absolute;
  top: 0px;
  right: 229px;
  width: 255px;
  height: 284px;
  overflow: hidden;
  background: url("../assets/download.png");
  background-position: 0px 0px;
}

.imgxvhua {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url("../assets/img/1.png");
  /* background-size: cover; */
  filter: blur(70px);
  /* transform: scale(3); */
  height: 254px;
  z-index: -1;
}
</style>
